{% extends 'base_main.html' %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/main/css/home.css' %}">
{% endblock %}

{% block ext_js %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/swiper.jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'axf/main/js/home.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="home">
        {# 首页顶部轮播 #}
        <div class="swiper-container" id="topSwiper">
            <div class="swiper-wrapper">
                {% for main_wheel in main_wheels %}
                    <div class="swiper-slide">
                        <img src="{{ main_wheel.img }}" alt="{{ main_wheel.name }}">
                    </div>
                {% endfor %}
            </div>
            <div class="swiper-pagination"></div>
        </div>

        {# 首页顶部导航 #}
        <div class="topMenu">
            <nav>
                <ul>
                    {% for main_nav in main_navs %}
                        <li>
                            <img src="{{ main_nav.img }}" alt="{{ main_nav.name }}">
                            <span>{{ main_nav.name }}</span>
                        </li>
                    {% endfor %}

                </ul>
            </nav>
        </div>

        {# 首页必购 #}
        <div class="swiper-container" id="swiperMenu">
            <ul class="swiper-wrapper">
                {% for main_must_buy in main_must_buys %}
                    <li class="swiper-slide">
                        <img src="{{ main_must_buy.img }}" alt="{{ main_must_buy.name }}">
                    </li>
                {% endfor %}
            </ul>
        </div>

        {# 首页的主显示 #}
        <ul>
            {% for main_show in main_shows %}
                <li class="mainInfo">
                    <section>
                        <h3>
                            {{ main_show.name }}
                            <a href="#">更多&gt;</a>
                            <span></span>
                        </h3>
                        <div>
                            <a href="#">
                                <img src="{{ main_show.img }}" alt="{{ main_show.name }}">
                            </a>
                        </div>
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img1 }}" alt="{{ main_show.long_name1 }}">
                                    <p class="description">{{ main_show.long_name1 }}</p>
                                    <span>{{ main_show.price1 }}</span>
                                    <s>{{ main_show.market_price1 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img2 }}" alt="{{ main_show.long_name2 }}">
                                    <p class="description">{{ main_show.long_name2 }}</p>
                                    <span>{{ main_show.price2 }}</span>
                                    <s>{{ main_show.market_price2 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img3 }}" alt="{{ main_show.long_name3 }}">
                                    <p class="description">{{ main_show.long_name3 }}</p>
                                    <span>{{ main_show.price3 }}</span>
                                    <s>{{ main_show.market_price3 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>
                        </ul>

                    </section>
                </li>
            {% endfor %}

        </ul>
    </div>
{% endblock %}